import { useEffect, useState } from 'react';
import GoodsInfoCard from '../../components/GoodsInfoCard'
import SelectGoods from '../../components/SelectGoods'
import './index.scss'
import { Input, Select } from 'antd';
import { useNavigate } from 'react-router-dom'
import { interfacesGoods } from '../../interfaces/goods';
import { message } from 'antd'

function Product() {
  const navigate = useNavigate()

  useEffect(() => {
    getGoodsDetail()
  }, [])

  // 获取商品详情
  const [goods, setGoods] = useState()
  const getGoodsDetail = () => {
    interfacesGoods.goodsDetail({}).then(res => {
      setGoods(res.data);
    })
  }

  // 选择商品回调
  const [selectedGoods, setSelectGoods] = useState()
  const onSelectGoodsHandle = (e) => {
    setSelectGoods(e);
  }

  // 当前选择商品数量
  const [count, setCount] = useState(1)

  // 增加商品数量
  const plus = () => {
    if (count >= selectedGoods.stock) return;
    setCount(count+1);
  }

  // 减少商品数量
  const sub = () => {
    if (count <= 1) return;
    setCount(count-1);
  }

  const [address, setAddress] = useState('')
  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const payTypeOption = [
    { value: 'USD', label: 'Payment USD' },
    { value: 'SQL', label: 'Payment SQL' },
  ]
  const [payType, setPayType] = useState('Payment USD')

  // 校验
  const validation = () => {
    if (!phone) {
      message.info('phone is require');
      return false;
    } else if (!address) {
      message.info('address is require');
      return false;
    } else if (!name) {
      message.info('name is require');
      return false;
    }
    return true;
  }

  // 提交订单
  const submitOrder = () => {
    if (!validation()) return;
    const params = {
      sku_no: selectedGoods.sku_no,
      currency: payType,
      quantity: count,
      shipping_info: {
        phone_number: phone,
        full_name: name,
        detail_address: address 
      }
    }
    interfacesGoods.submitOrder(params).then(res => {
      if (res.code === 0) {
        const { order_no } = res.data;
        navigate(`/order?id=${order_no}`);
        window.scrollTo(0, 0);
      }
    })
  }

  return (
    <div className='product-page'>
      <div className='product'>
        <div className='title'>
          <div className='text'>WISP Healthy e-cigarettes</div>
        </div>
        <div className='content'>
          <SelectGoods className="select-goods" goods={goods} onSelectGoods={onSelectGoodsHandle}></SelectGoods>
          <div className='product-info'>
            <GoodsInfoCard goods={goods} selectedGoods={selectedGoods}></GoodsInfoCard>
            <div className='quantity'>
              <div className='label'>Quantity/(BOX)</div>
              <div className='select-count'>
                <div className='sub' onClick={sub}>
                  <img alt='sub' src={require('../../assets/sub.png')} />
                </div>
                <div className='count'>{ count } boxs</div>
                <div className='plus' onClick={plus}>
                  <img alt='plus' src={require('../../assets/plus.png')} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className='submit-order'>
        <div className='order-form'>
          <div className='form-item'>
            <div className='form-label'>Delivery address</div>
            <Input placeholder="Expected to be shipped on July 20,2024" onChange={e => setAddress(e.target.value)} />
          </div>
          <div className='form-item'>
            <div className='form-label'>Name of consignee</div>
            <Input placeholder="Expected to be shipped on July 20,2024" onChange={e => setName(e.target.value)} />
          </div>
          <div className='form-item'>
            <div className='form-label'>Phone number</div>
            <Input placeholder="Expected to be shipped on July 20,2024" onChange={e => setPhone(e.target.value)} />
          </div>
        </div>
        <div className='select-paytype'>
          <Select
            defaultValue="Payment USD"
            style={{
              width: 420,
              height: 52,
              textAlign: 'center'
            }}
            options={payTypeOption}
            onChange={value => setPayType(value)}
          />
        </div>
        <div className='total-account'>
            <div className='label'>Total:</div>
            <div className='util'>USD/USDT</div>
            <div className='account'>{ count * (selectedGoods?.price_config.USDT || 0) }</div>
        </div>
        <div className='btn' onClick={submitOrder}>Submit Order</div>
      </div>
      <div className='bottom-box'></div>
    </div>
  )
}

export default Product